<template>
  <div class="complex-radio-group" :class="props.disabled ? 'complex-radio-group--disabled' : ''">
    <div
      class="complex-radio"
      v-for="item in props.options"
      :key="item.value"
      @click="handleClick(item)"
      :class="item.value === localValue ? 'complex-radio--active' : ''"
    >
      <div class="radio-label">
        <CIcon class="radio-label__icon" :type="item.icon" v-if="item.icon" />
        <span class="radio-label__text">{{ item.label }}</span>
      </div>
      <div class="radio-desc" v-if="item.desc">{{ item.desc }}</div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'ComplexRadio'
};
</script>
<script lang="ts" setup>
import { withDefaults, defineProps, defineEmits, computed } from 'vue';
import type { ComplexRadioOptions } from './types';
interface ComplexRadioProps {
  /**
   * 选项
   */
  options: ComplexRadioOptions;
  /**
   * 禁用
   */
  disabled?: boolean;
  /**
   * 选中项
   */
  modelValue: any;
}

const props = withDefaults(defineProps<ComplexRadioProps>(), {
  disabled: false
});

const emits = defineEmits(['update:modelValue']);

const localValue = computed({
  get: () => {
    return props.modelValue;
  },
  set: (val: string) => {
    emits('update:modelValue', val);
  }
});

function handleClick(item: ComplexRadioOptions[0]) {
  if (props.disabled) return;
  localValue.value = item.value;
}
</script>
<style lang="scss" scoped>
.complex-radio-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .complex-radio {
    padding: 8px 12px;
    width: 240px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ebeff2;
    box-sizing: border-box;
    cursor: pointer;
    .radio-label {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #435970;
      line-height: 22px;
      .radio-label__icon {
        margin-right: 3px;
        font-size: 14px;
      }
      .radio-label__text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        text-align: left;
        font-style: normal;
      }
    }
    .radio-desc {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #7a8a99;
      line-height: 20px;
      text-align: left;
      font-style: normal;
    }
    &.complex-radio--active {
      background: rgba(239, 250, 247, 0.7);
      border-color: rgba(3, 172, 130, 0.4);
      .radio-label {
        color: #03ac82;
      }
    }
  }
  &.complex-radio-group--disabled {
    .complex-radio {
      cursor: not-allowed;
    }
  }
  .complex-radio + .complex-radio {
    margin-left: 8px;
  }
}
</style>
